<template>
  <div class="shoplist_container">
      <ul v-if="shopListArr.length" v-load-more="loaderMore">
            <router-link tag="li" v-for="shop in shopListArr" :key="shop.id" 
                class="shop_li"
                :to="{path: 'shop', query:{geohash, id: shop.id}}">
                <section>
                    <img v-lazy="imgBaseUrl + shop.image_path" class="shop_img">
                </section>
                <section class="shop_right">
                    <header class="shop_detail_header">
                        <h4 :class="shop.is_premium?'premium':''" class="shop_title ellipsis">{{shop.name}}</h4>
                        <ul class="shop_detail_ul">
                            <li v-for="item in shop.supports" :key="item.id" class="supports">{{item.icon_name}}</li>
                        </ul>
                    </header>
                    <h5 class="rating_order_num">
                        <section class="rating_order_num_left">
                            <section class="rating_section">
                                <RatingStar :rating="shop.rating"></RatingStar>
                                <span class="rating_num">{{shop.rating}}</span>
                            </section>
                            <section class="order_section">
                                月售{{shop.recent_order_num}}单
                            </section>
                        </section>
                        <section class="rating_order_num_right">
                            <span class="delivery_style delivery_left" :style="'background:#'+shop.delivery_mode.color" v-if="shop.delivery_mode">{{shop.delivery_mode.text}}</span>
                            <span class="delivery_style delivery_right" v-if="zhunshi(shop.supports)">准时达</span>
                        </section>
                    </h5>
                    <h5 class="fee_distance">
                        <p class="free">
                            <span>¥{{shop.float_minimum_order_amount}}起送</span>
                            <span class="segmentation">/</span>
                            <span>{{shop.piecewise_agent_fee.tips}}</span>
                        </p>
                        <p class="distance_time">
                            <span >{{shop.distance}}</span>
							<span class="segmentation">/</span>
							<span class="order_time">{{shop.order_lead_time}}</span>
                        </p>
                    </h5>
                </section>
            </router-link>
      </ul>
      <Loading v-show="showLoading"></Loading>
  </div>
</template>

<script>
import {mapState} from 'vuex';
import {shoplist} from '@api/getData'
import RatingStar from './RatingStar'
import {loadMoreMixin} from '../../utils/mixin'
import {imgBasePath} from '../../utils/config'
export default {
    props:['geohash','restaurantCategoryId','restaurantCategoryIds','sortby','deliveryMode','supprtIds','confirmSelect'],
    components:{
        RatingStar,
    },
    mixins:[loadMoreMixin],
    computed:{
        ...mapState(['latitude','longitude'])
    },
    watch:{
        restaurantCategoryIds(){
            this.listenPropChange();
        },
        sortby(){
            this.listenPropChange();
        },
        confirmSelect(){
            console.log(this.confirmSelect)
            this.listenPropChange();
        }
    },
    data(){
        return {
            offset:0,
            shopListArr:[],
            imgBaseUrl:imgBasePath,
            showLoading:false, // 显示 Loading
            touchend:false, // 没有更多数据
            isLoadingData:false, // 数据加载中标识，用于防止重复请求数据 
        }
    },
    mounted(){
        this.initData();
    },
    methods:{
        showLoad(){
            this.showLoading=true;
        },
        hideLoad(){
            this.showLoading=false;
        },
        async initData(){
            this.showLoad();
            let res = await shoplist({latitude:this.latitude,longitude:this.longitude,offset:this.offset});
            if(res){
                this.shopListArr=[...res];
                if(res.length<10){
                    this.touchend=true;
                }
            }      
            this.hideLoad();      
        },
        zhunshi(supports){
            if(supports instanceof Array && supports.length>0){
                return supports.some(item=>{
                    return item.icon_name === '准'
                })
            }
            return false;
        },
        async listenPropChange(){
            // show loading first
            this.showLoad();   
            let res = await shoplist({
                                latitude:this.latitude,
                                longitude:this.longitude,
                                offset:this.offset,
                                restaurant_category_ids:this.restaurantCategoryIds,
                                order_by:this.sortby, 
                                delivery_mode:this.deliveryMode, 
                                support_ids:this.supprtIds
                                });
            this.shopListArr=[...res];
            this.hideLoad();      
        },
        async loaderMore(){
            if(this.touchend){return}; // 没有数据，不要再去请求接口
            if(this.isLoadingData){return}; // 加载中，不要再去请求接口
            this.isLoadingData=true;
            this.showLoad();
            this.offset+=10;
            let res = await shoplist({
                                latitude:this.latitude,
                                longitude:this.longitude,
                                offset:this.offset,
                                restaurant_category_id:this.restaurantCategoryId,
                                });
            this.shopListArr = [...this.shopListArr,...res];
            if (res.length < 10) {
				this.touchend = true;
			}
            this.hideLoad();
            this.isLoadingData=false;
        }
    }
}
</script>

<style lang="scss" scoped>
@import '~@styl/mixin.scss';
.shoplist_container{
    background: #fff;
    margin-bottom: .5rem;
}
.shop_li{
    display: flex;
    padding: 0.7rem 0.4rem;
    border-bottom: 0.025rem solid #f1f1f1;
}
.shop_img{
    @include wh(2.7rem,2.7rem);
    margin-right: 0.4rem;
    border-radius: 0.2rem;
}
.shop_right{
    flex: 1;
    .shop_detail_header{
        @include fj;
        align-items: center;
        .shop_title{
            width: 8.5rem;
            padding-left: 0.01rem;
            color: #333;
            @include font(0.65rem,0.75rem,'PingFangSC-Regular');
            font-weight: 700;
            &.premium::before{
                content: '品牌';
                font-size: 0.5rem;
                line-height: 0.6rem;
                background: #ffd930;
                color: #333;
                font-weight: 700;
                padding: 0 0.08rem;
                border-radius: 0.1rem;
				margin-right: 0.2rem;
            }
        }
        .shop_detail_ul{
            display: flex;
            transform: scale(0.8);
            transform-origin: right center;
            li{
                @include sc(0.5rem,#999);
                border: 0.025rem solid #f1f1f1;
                padding: 0 0.04rem;
                border-radius: 0.08rem;
				margin-left: 0.05rem;
            }
        }
    }
    .rating_order_num{
        @include fj;
        align-items: center;
        margin-top: 0.52rem;
        height: 0.6rem;
        .rating_order_num_left{
            @include fj;
            .rating_section{
                @include fj;
                align-items: center;
                .rating_num{
                    @include sc(0.4rem, #ff6000);
                    margin: 0 0.2rem;
                }
            }
            .order_section{
                transform: scale(.8);
                margin-left: -0.2rem;
                @include sc(0.4rem, #666);
            }
        }
        .rating_order_num_right{
            display: flex;
            align-items: center;
            transform: scale(.7);
            min-width: 5rem;
            justify-content: flex-end;
            margin-right: -0.8rem;
            .delivery_style{
                font-size: 0.4rem;
                padding: 0.04rem 0.08rem 0;
                border-radius: 0.08rem;
                margin-left: 0.08rem;
                border: 1px;
                border: 0.025rem solid $blue;
                &.delivery_left{
                    color: #fff;
                    
                }
                &.delivery_right{
                    color: $blue;
                }
            }
        }
    }
    .fee_distance{
        margin-top: 0.52rem;
        @include fj;
        @include sc(0.5rem, #333);
        .free{
            transform-origin: left center;
            transform: scale(0.9);
            @include sc(0.5rem,#666);
        }
        .distance_time{
            transform: scale(0.9);
            transform-origin: right center;
            span{
                color: #999;
            }
            .order_time{
                color: $blue;
            }
        }
        .segmentation{
            color: #ccc;
        }
    }
}


</style>